<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>扫雷</title>
        <script src="js/vue.js"></script>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table{
            margin: 50px auto;
        }
        td{
            width: 25px;
            height: 25px;
            background-image: url(img/type0.svg);
            background-size: 100%;
        }
        .level{
            font-size: 20px;
            color: blue;
            text-align: center;
            margin-top: 20px;
        }
        .level b{
            padding: 0 20px;
        }
    </style>
    <body>
        <div id="app">
            <p class="level">
                <b v-for="(item,index) in level" @click="current=index,init()">{{item.name}}</b>
                <br>
                <span>雷:{{count}}</span>
            </p>
            <p align="center">
                {{m<10?"0"+m:m}}:{{s<10?"0"+s:s}}
            </p>
            <table cellspacing="0">
    <tr v-for="row in list">
        <td v-for="col in row" >
            <div v-if="col.closed" @click.right.prevent="point(col)" @click="open(col)" >
                <img v-if="!col.flag" width="100%" src="img/closed.svg" alt="">
                <img v-else width="100%" src="img/flag.svg" alt="">
            </div>
            <div v-else style="height: 25px;"  @click="openSafe(col)">
                <img v-if="col.content==-1" width="100%" src="img/mine.svg" alt="">
                <img width="100%" v--else :src="'img/type'+col.content+'.svg'" alt="">
            </div>
        </td>
    </tr>
</table>
        </div>
        <script src="js/saolei.js"></script>
    </body>
</html>